<template>
  <a-table
    :columns="columns"
    :data-source="data"
    :row-key="(record) => record.id"
    :pagination="false"
    :scroll="{ y: 500 }"
  >
    <span slot="select" slot-scope="text, record">
      <a-radio :checked="record.isChecked" @click="change(record)"></a-radio>
    </span>

    <span slot="name" slot-scope="text">
      <a-tooltip>
        <template slot="title">
          {{ text }}
        </template>
        {{ text }}
      </a-tooltip>
    </span>

    <span slot="link" slot-scope="text">
      <a-tooltip>
        <template slot="title">
          {{ text.link }}
        </template>
        {{ text.link }}
      </a-tooltip>
    </span>
  </a-table>
</template>

<script>
import { json } from "body-parser";

const columns = [
  {
    title: "选择",
    scopedSlots: {
      customRender: "select",
    },
    width: 60,
  },
  {
    title: "ID",
    dataIndex: "id",
    width: 80,
  },
  {
    title: "名称",
    dataIndex: "name",
    scopedSlots: {
      customRender: "name",
    },
    width: 200,
    ellipsis: true,
  },
  {
    title: "页面链接",
    scopedSlots: {
      customRender: "link",
    },
  },
];

export default {
  data() {
    return {
      columns,
      value: "",
      data: [],
    };
  },

  props: {
    list: {
      type: Array,
      default() {
        return [];
      },
    },
  },

  watch: {
    list: {
      handler(e) {
        if (e && e.length) {
          this.data = JSON.parse(JSON.stringify(e)).map((el) => {
            el.isChecked = false;
            return el;
          });
        }
      },
      deep: true,
      immediate: true,
    },
  },

  methods: {
    change(item) {
      this.$nextTick(() => {
        this.data.forEach((el) => {
          el.isChecked = false;
        });
        item.isChecked = true;
      });

      this.$emit("handle", "link", item);
    },
  },
};
</script>
<style lang="scss" scoped></style>
